<template>
	<view id="feedbackPage">
		<view class="label">
			问题或建议
		</view>
		<textarea class="txtarea" placeholder="请描述您的问题，最好附上描述问题的照片和您的个人联系方式以便方便我们更好的为您解决"/>
		<view class="label">
			添加照片
		</view>
		<view class="pic-wrapper">
			<view class="pic-wrap" @click="choosePic">
				<image class="camara" :class="{'picFull': pic !=='../../static/img/camara.png'}" :src="pic" mode="aspectFill"></image>
			</view>
		</view>
		<view class="label">
			联系方式
		</view>
		<view class="inp-wrapper">
			<input type="tel" class="tel-inp" placeholder="请输入您的联系电话"/>
		</view>
		<view class="foooter-next" @click="sumbit">
			提交
		</view>
		<operationModal :url="url" :txt="txt" :visable="visable" @close="close"></operationModal>
	</view>
</template>

<script>
	import operationModal from "@/components/operation-modal/operation-modal.vue"
	import successPng from "../../static/img/success.png"
	import failPng from "../../static/img/fail.png"
	export default {
		components: {operationModal},
		data() {
			return {
				url: successPng,
				txt: '提交成功',
				visable: false,
				pic: '../../static/img/camara.png',
			}
		},
		methods: {
			choosePic() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (e)=> {
						that.pic = e.tempFilePaths[0]
					}
				})
				
			},
			sumbit() {
				this.visable = true
				setTimeout(() => {
					uni.reLaunch({
						url: '../me/me'
					})
				},600)
				
			},
			close() {
				this.visable = false
			}
		}
	}
</script>

<style>
#feedbackPage {
	padding-left: 28upx;
}
.label {
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1);
	margin: 39upx 0 0 0;
}
.txtarea {
	display: block;
	box-sizing: border-box;
	font-size: 24upx;
	width:694upx;
	height:244upx;
	background:rgba(255,255,255,1);
	border:2upx solid rgba(245,245,245,1);
	border-radius:12upx;
	margin: 29upx 0 0 0;
	padding: 26upx 27upx 26upx 21upx;
	line-height: 38upx;
}
.pic-wrapper {
	margin-top: 29upx;
	height:200upx;
}
.pic-wrap {
	width:200upx;
	height:200upx;
	background:rgba(242,242,242,1);
	border-radius:8upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.camara {
	width: 82upx;
	height: 66upx;
}
.picFull {
	width: 100%;
	height: 100%;
}
.inp-wrapper {
	margin-top: 23upx;
	border-bottom: 1upx solid #EEEEEE;
	font-size:28upx;
	font-weight:400;
	color:rgba(153,153,153,1);
}
.tel-inp {
	
}
</style>
